<template>
    <div>
        <el-card class="login-form-layout">
            <h2 class="login-title color-main">手机找回密码</h2>
            <el-form :model="PhoneFindPassword" ref="phoneFindPasswordForm" :rules="rules" label-width="0">
                <el-form-item prop="phone">
                    <el-col :span="15">
                        <el-form-item prop="date1">
                            <el-input v-model="PhoneFindPassword.phone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false"
                                       style="margin-left: 10px;">
                                发送验证码
                            </el-button>
                            <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">
                                {{btntxt}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item prop="sendcode">
                    <el-input v-model="PhoneFindPassword.sendcode" placeholder="请输入验证码"></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input type="password" placeholder="请输入密码" v-model="PhoneFindPassword.pass"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input type="password" v-model="PhoneFindPassword.checkPass" placeholder="请输入确认密码"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('phoneFindPasswordForm')">提交</el-button>
                    <el-button @click="resetForm('phoneFindPasswordForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <img :src="login_center_bg" class="login-center-layout">
    </div>
</template>

<script>
    import login_center_bg from '@/assets/images/login_center_bg.png'
    import {sendCode, findPassword} from '@/api/sys/store'

    export default {
        name: 'login',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.PhoneFindPassword.checkPass !== '') {
                        if (value === '') {
                            callback(new Error('请再次输入密码'));
                        } else if (value !== this.PhoneFindPassword.pass) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.PhoneFindPassword.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var validatePhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入手机号'));
                } else {
                    callback();
                }
            };
            var validateSendcode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'));
                } else {
                    callback();
                }
            };
            return {
                rules: {
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    sendcode: [
                        {validator: validateSendcode, trigger: 'blur'}
                    ],
                },
                PhoneFindPassword: {
                    phone: '',
                    sendcode: '',
                    pass: '',
                    checkPass: '',
                },
                disabled: false,
                time: 0,
                btntxt: "重新发送",
                loading: false,
                login_center_bg
            }
        },
        created() {
        }
        ,
        methods: {
            //手机验证发送验证码
            sendcode() {
                const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
                if (this.PhoneFindPassword.phone == '') {
                    this.$message({
                        message: '手机号不能为空',
                        center: true
                    })
                    return
                }
                if (!reg.test(this.PhoneFindPassword.phone)) {
                    this.$message({
                        message: '请输入正确的手机号',
                        center: true
                    })
                    return
                } else {
                    // 请求接口
                    sendCode({type: "phone", phone: this.PhoneFindPassword.phone}).then(response => {
                        if (response.code == 200) // 成功
                        {
                            this.time = response.data / 1000;
                            this.disabled = true;
                            this.timer();
                        } else {
                            this.$message({
                                message: response.msg,
                                type: 'error',
                                duration: 1000
                            });
                        }
                    });
                    // console.log(this.PhoneFindPassword.phone);
                    // this.$message({
                    //     message: '发送成功',
                    //     type: 'success',
                    //     center: true
                    // });
                }
            }
            ,
            //60S倒计时
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt = this.time + "s后重新获取";
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    this.btntxt = "获取验证码";
                    this.disabled = false;
                }
            }
            ,
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 请求接口
                        findPassword({type: "phone",phone: this.PhoneFindPassword.phone,sendCode: this.PhoneFindPassword.sendcode,password: this.PhoneFindPassword.pass,checkPassword: this.PhoneFindPassword.checkPass
                        }).then(response => {
                            if (response.code == 200) // 成功
                            {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.push({path: '/login'})
                            } else {
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
            ,
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .login-form-layout {
        position: absolute;
        left: 0;
        right: 0;
        width: 360px;
        margin: 140px auto;
        border-top: 10px solid #409EFF;
    }

    .login-title {
        text-align: center;
    }

    .login-center-layout {
        background: #409EFF;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-top: 200px;
    }
</style>
